<script type="text/jsx">
import EleLabel from './form-el/EleLabel.vue'
import EleText from './form-el/EleText'
import EleSelect from './form-el/EleSelect'
import EleDate from './form-el/EleDate'
import EleTime from './form-el/EleTime'
import EleDateTime from './form-el/EleDateTime'
import EleCheckBox from './form-el/EleCheckBox'
import EleChoosePerson from './form-el/EleChoosePerson'
import EleHidden from './form-el/EleHidden'
import EleTextArea from './form-el/EleTextArea'
import EleUploader from './form-el/EleUploader'
import EleEmail from './form-el/EleEmail'
import EleIDCardNumber from './form-el/EleIDCardNumber'
import EleIDCardOCR from './form-el/EleIDCardOCR'
import EleCascader from './form-el/EleCascader'
import EleEsign from './form-el/EleEsign'
import EleDepartment from './form-el/EleDepartment'

export default {
  name: 'DynamicFormPartItem',
  components: {
    EleLabel, EleText, EleSelect, EleDate, EleTime, EleDateTime,
    EleCheckBox, EleChoosePerson, EleHidden, EleTextArea, EleUploader, EleEmail,
    EleIDCardNumber, EleIDCardOCR, EleCascader, EleEsign, EleDepartment
  },
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      errMsg: '',
      placeholder: ''
    }
  },
  computed: {
    // errMsg() {
    //   let str = ''
    // if (this.item.required) {
    //   str = '请选择' + this.item.label
    // }
    //   return str
    // },
    // placeholder() {
    //   let str = ''
    // if (this.item.placeholder) {
    //   str = this.item.placeholder
    // } else if (this.item.label) {
    //   str = '请选择' + this.item.label
    // }
    //   return str
    // }
  },
  watch: {
    // item: {
    //   handler(obj) {
    //     if (obj.required) {
    //       this.errMsg = '请选择' + obj.label
    //     }
    //     if (!obj.placeholder) {
    //       this.placeholder = '请选择' + obj.label
    //     }
    //   },
    //   deep: true
    // }
  },
  methods: {
    idCardNumberCallback(args) {
      this.$emit('idCardNumberCallback', args)
    },
    idCardORCCallback(args) {
      this.$emit('idCardORCCallback', args)
    },
    onChangeOtherRequired(args) {
      this.$emit('onChangeOtherRequired', args)
    },
    onExpressionProc(args) {
      this.$emit('onExpressionProc', args)
    }
  },
  render (h) {
    var item = this.$props.item
    // 如果是input输入框
    if (item.inputType === 0) {
      return (<Ele-label item={item}></Ele-label>)
    } else if (item.inputType === 1 || item.inputType === 'text') {
      if (item.colType === 'date') {
        return (<Ele-date item={item}></Ele-date>)
      } else if (item.colType === 'datetime') {
        return (<Ele-date-time item={item}></Ele-date-time>)
      } else if (item.colType === 'time') {
        return (<Ele-time item={item}></Ele-time>)
      } else if (item.colType === 'email') {
        return (<Ele-email item={item}></Ele-email>)
      } else if (item.colType === 'image') {
        return (<Ele-uploader item={item}></Ele-uploader>)
      } else if (item.colType === 'blob' || item.colType === 'file') {
        return (<Ele-uploader item={item} accept='*.*'></Ele-uploader>)
      } else if (item.colType === 'textarea') {
        return (<Ele-text-area item={item}></Ele-text-area>)
      } else if (item.colType === 'idcardnumber') {
        return (<Ele-iD-card-number item={item} on-idCardNumberCallback={this.idCardNumberCallback}></Ele-iD-card-number>)
      } else if (item.colType === 'idcardocr') {
        return (<Ele-iD-card-oCR item={item} on-idCardORCCallback={this.idCardORCCallback}></Ele-iD-card-oCR>)
      } else if (item.colType === 'esign') {
        return (<Ele-esign item={item}></Ele-esign>)
      } else if (item.colType === 'deptcode') {
        return (<Ele-department item={item}></Ele-department>)
      } else {
        return (<Ele-text item={item}></Ele-text>)
      }
    } else if (item.inputType === 2 || item.inputType === 3 || item.inputType === 9 || item.inputType === 'select') {
      return (<Ele-select item={item} on-onChangeOtherRequired={this.onChangeOtherRequired} on-onExpressionProc={this.onExpressionProc}></Ele-select>)
    } else if (item.inputType === 21) {
      return (<Ele-cascader item={item}></Ele-cascader>)
    } else if (item.inputType === 4 || item.inputType === 5 || item.inputType === 41 || item.inputType === 'checkbox') {
      return (<Ele-check-box item={item}></Ele-check-box>)
    } else if (item.inputType === 'date') {
      return (<Ele-date item={item}></Ele-date>)
    } else if (item.inputType === 'time') {
      return (<Ele-time item={item}></Ele-time>)
    } else if (item.inputType === 'datetime') {
      return (<Ele-date-time item={item}></Ele-date-time>)
    } else if (item.inputType === 7 || item.inputType === 'person') {
      return (<Ele-choose-person item={item}></Ele-choose-person>)
    } else if (item.inputType === 8 || item.inputType === 'deptcode') {
      return (<Ele-department item={item}></Ele-department>)
    } else if (item.inputType === -1 || item.inputType === 'hidden') {
      return (<Ele-hidden item={item}></Ele-hidden>)
    } else if (item.inputType === 2 || item.inputType === 'textarea') {
      return (<Ele-text-area item={item}></Ele-text-area>)
    } else {
      return (<div>未识别的组件类型：【{item.type}】!</div>)
    }
  }
}
</script>
